The blurry difference between a web app and a website explained, at last

Feel confused when asked about the difference between a website and a web application? You are not alone! It is really difficult to draw a clear line between the two terms which are often used interchangeably.  You may have read that the main difference is that a website is a static page that simply displays information, while a web application is a complex, dynamic solution that interacts with users. This is partially true, but this definition lacks important details. Let’s clear up some common misconceptions once and for all. Read on!

What is the difference between a website and a web app?

Why is it so difficult to distinguish between a website and a web app? First of all, let's look at the definitions by Technopedia.

• Website is a collection of publicly accessible, interlinked Web pages that share a single domain name.
• Web-based application (or Web App) is any program that is accessed over a network connection using HTTP, rather than existing within a device’s memory.

Do you understand the difference in meaning? Me, neither.

These definitions are not complete and do not cover all nuances.

Most articles that compare a website and a web app tell us that web apps are differentiated from the website by having three obligatory attributes — Authorization, Integration, and Interactivity. However, websites have evolved greatly since the early 2000s and have become as powerful as web apps. Today, they provide interactivity, they can have a complex back-end, and they can be integrated with CRM, ERP, or third-party software. Therefore, it might be difficult to distinguish a website from a web app.

Let’s look for the other details that might tell us more.

When do you need to create a website?

Websites are created for different purposes. Namely to:

• collect information in a single place
• establish the online presence of a business
• increase brand awareness
• showcase and sell goods and services

We can highlight the following types of websites:

1. Personal or business websites that present information about a business or an individual. They also generate leads. For example, our website, Greenice.net, tells our audience about our services.
2. Landing pages are usually single-page sites that describe specific goods or services and generate leads. There can be different landings for each product of the same brand. For example, we created 6 online stores for large cosmetics companies in the US. Each page is dedicated to a single product brand, and customers can order products directly from the webpage.

• Informational websites usually represent a collection of diverse content (articles, images, blog posts, videos). Look at Wikipedia, Medium, Forbes, and Quora. Their purpose is to inform and educate users. Users can often leave comments or create posts at such sites. 

• eCommerce websites include online stores, marketplaces, review websites, and price comparison websites. For example, Amazon is a huge, feature-rich website with a complex back-end.

• Directories allow people to find contacts of professionals and businesses in different areas. For example, we created NoCowboys, a tradesmen platform, where people can find any technician (i.e. a plumber or electrician) to help with household issues.

The features of a website may include:

• Search
• Registration and user profile
• Subscription to a newsletter
• Catalog of goods or services
• Shopping cart for orders
• Payments
• Reviews
• Blog
• Contact form
• Content Management System
• Admin panel

What is the website?

Websites have the following characteristics:

• Accessible. Websites do not require downloading and installation. Websites are accessible through a web browser by directly entering the URL or searching via Google, Bing, or another search engine. They need to be found on the Internet among the thousands of other websites on the internet. Therefore, each website needs excellent SEO.
• Shareable. Users can simply send the URL to each other via email or a messaging app.
• Responsive. Modern websites are created with a responsive design that adapts to any device regardless of the screen size.
• CMS-managed. As a rule, there is a Content Management System (CMS) behind most of the websites. It allows the Administrator to easily edit the website content without involving developers in every minor change.

Website Development Specifics

Websites are mainly created with front-end technologies like HTML, CSS, JavaScript.

Simple websites can be built with a website builder or with an off-the-shelf CMS. Often, however, common features are not enough to satisfy your business needs; in that case, you may need to develop a custom website.

Complex websites (like online marketplaces) also require back-end programming built with server-side languages like PHP, Java, or Ruby.

Building a website from scratch guarantees a unique look and functionality. A custom website will also allow you to integrate all of your company’s systems into one seamless solution.

For example, we built Arcbazar, a large international online marketplace for creative projects. If someone needs to design a house or apartment, they can post the specifications on the platform and launch a competition. Architects and designers from all over the world can register and take part in the contest. The project that satisfies the client’s needs wins a monetary prize. The clients benefit from crowdsourcing heaps of original ideas for an affordable price instead of hiring an expensive designer.

While Arcbazar looks like a website with a simple interaction, behind the scenes, it has complex back-end programming providing its users with data protection, the anonymity of projects, secure payments, and AI-powered recommendations.

When do you need to build a web application?

Create a web app, if you need to:

• automate multiple tasks of your business and optimize the workflow.
• have a closed system accessed by authorized users only.
• provide complete digital interaction between the company and users.
• process and analyze different kinds of data.
• cater to a variety of services or products.
• distribute your web app on the SaaS business model.

Examples of web apps:

1. Web portals are closed systems that allow customers to interact with the business directly from the web browser after authorization.
2. Customer Management System (CRM) is used mostly for managing sales, contacts, and marketing campaigns. A CRM application saves tons of time and effort. It can automate mundane processes and sync data with other applications.
3. Content Management System (CMS) is a web application that allows the Admin to manage digital content without the developer's interference.
4. Enterprise Resource Planning (ERP) is a suite of integrated applications that allows work to be automated and data to be synchronized throughout multiple company departments.
5. Industry-specific business automation applications are different kinds of software tailored for a particular industry. Some of these include Learning Management Systems, Electronic Health/Medical Records, Human Resources Management Systems, Field Service Management Systems, and Hotel Management Systems.

We created a custom Human Resource Management system for a caregiving agency that simultaneously serves as a web portal for job applicants, a web portal for employees, and an applicant tracking system. It is also integrated with the Learning Management System created specifically for the business objectives.

See how we developed a custom HR solution for home health services - Read Case Study.

What is a web app?

All web apps have the following common characteristics:

• Cloud-based web apps, just like websites, require no installation. Unlike desktop or mobile apps, they store all the data on the server.
• Seamless updating. Users do not need to manually run web application updates — all updates are performed on the server and delivered to users.
• Authorization. Web apps require user registration and password-protected logins to keep the data safe from unauthorized access.

Web App Development Specifics

Usually, web apps need both front- and back-end structures because most of the processes take place on the server, whereas simple websites can go with only front-end technologies.

Web app design includes database creation, development of interactive features, and integration with other applications for seamless data synchronization. For example, a CRM can be connected with ERP, accounting, or email marketing software.

Traditional Web App vs SPA

There are two approaches to web app development: traditional, or single-page applications (SPA). In traditional web-based applications, most business logic is performed on the server-side, while in Single-Page Applications (SPA) all the processes take place in the browser that connects to the server via API.

The traditional approach is sufficient for creating read-only systems that do not need a complicated interface. They are CRMs, ERPs, and other business automation solutions.

But if you need a multi-featured interface that needs to load the information quickly, it is better to develop an SPA. Some of the best-known single-page applications are Gmail, Facebook, Trello, and Netflix.

One of the advantages of SPA is speed. High load speed matters for online stores where each second of delay means thousands of dollars in lost revenue. If a page takes 3 seconds or more to load, you can lose 40% or more of your traffic and potential buyers.

An SPA has just one page that only updates the necessary part of the information. An SPA can use the cached data which is especially important if the Internet connection suddenly drops. The user can still use the app and the data will be synchronized with the server when the connection is restored.

You need an SPA when:

• your app is designed to sell a single product or service.
• you need a bright, animated, or highly interactive user interface.
• the app should be able to work in offline mode.
• you need a single-purpose app (like a to-do list, emailing, streaming)
• you do not need pages to index in the search.

Trello is a good example of an SPA. With Trello users can quickly and easily create and manage individual or group work:

How about mobile web apps?

Even first-class web apps might be difficult to use on mobile devices. A screen full of features does not look good on small screens. If a web app needs to be used on a mobile device, it is better to create a mobile version with a great user experience. The mobile web app needs only the most vital features when you are away from the desktop.

How to develop a mobile web app?

Web apps are often confused with mobile apps but there is a big difference. Web apps can be used on mobiles through web browsers, or a version can be designed specifically for mobile use.

You can choose between creating a native or cross-platform web app (Hybrid of PWA).

Native apps

To create native mobile apps you need to develop separate apps for each particular platform (iOS, Android, or Windows Phone). While the development of three apps requires more time and money, the native apps provide a better user experience and increased security.

You need a native app when:

• you generate most traffic from mobile devices.
• you need a smooth mobile user experience and a native look.
• you want to distribute your app through AppStore or Google Play.
• you need high performance.
• you need the app to communicate with a mobile device software (like GPS, camera).

Hybrid apps

With the Hybrid approach, you need to build only one app that fits all platforms and devices. You can save time when you add new features or fix bugs because only one codebase needs to be changed instead of re-building two or three separate applications. Hybrids are perfect for MVP as they are cost-effective and quick in development.

You need a hybrid app when:

• you need a mobile version of your web app but do not want to spend time and money on native development.
• you need to verify your startup idea with a mobile app of your MVP quickly and inexpensively.
• you need an app both for Android and iOS but lack time and budget.

For one of our clients, we created an app for taking photos, videos, and gifs of jewelry. We built an app for instant editing of the shots on the smartphone. JavaScript and React Native technologies allowed us to quickly create a hybrid application that rivals native iOS and Android apps in appearance and performance.

Progressive Web Apps

One of the drawbacks of websites and web apps is poor usability on mobile devices. Usually, websites and traditional web apps are initially created for desktops. When displayed on small smartphone screens, their UI elements must be resized. This may create difficulties for users even with websites that have a responsive design (the layout adapts to the screen size).

If most of your users access your site with mobiles, a progressive web application is an excellent solution. Such apps look and feel just like native apps — they open in the browsers, they are instantly installed on mobiles, and they can even work in offline mode.

Moreover, a PWA takes up very little memory. Pinterest’s PWA occupies only 150KB, compared to the Android and iOS app, which consume 9.6MB and 56MB respectively.

Creating a PWA from scratch or redesigning your existing website into a PWA means you’ll get fantastic benefits, such as:

• Improved performance
• Enhanced user experience
• Better SEO
• Solid security
• Higher conversion rates
• Offline access
• Seamless update delivery
• Quicker and cheaper development compared to native apps

Such platforms as Alibaba, Aliexpress, Lancome, Twitter, and OLX created PWAs in addition to their websites and native apps.

All these platforms are used largely through mobile devices so it was critical for them to establish a firm mobile presence. Research showed, however, that users were not eager to download different apps they do not regularly use.

“Users consider having to download an app to browse or complete a transaction an unnecessary barrier, compared to the quick, easy solution of browsing directly from their mobile browser,” — Zou Yu, Director of Alibaba’s Mobile Team said.

Alibaba, one of the biggest online retailers in the world, redesigned its website to a Progressive Web App, and saw incredible results:

• a 76% growth in total conversions
• 30% more active users per month on Android and 14% more on iOS
• 4 times more interaction through the "Add to Home Screen" option compared to native mobile app usage.

Another example is OLX, an international marketplace for classified ads. The company analysts learned that almost 90% of their users accessed the platform with mobile devices: half of their traffic came via their native app and half through the website. Product research, however, showed that many people were unhappy with the mobile website speed.

Adoption of the PWA technology, allowed OLX to achieve:

• 23% faster page loading
• an 80% reduction in bounce rates
• a 250% increase in the re-engagement rate due to the introduction of push notifications
• 146% increase in CTR 

You need PWA when:

• more than half of web traffic comes from mobile devices.
• you want to boost traffic and sales.
• the solution assumes multiple user interactions with the app and you need a fast UI.
• your current mobile app download rate is slow.
• you want to test your project on mobile users before developing native apps.
• push notifications are important for your business.

Web application vs website: What should you build?

As you can see, each solution is used to solve a definite challenge. We combined all the meaningful characteristics in tabular form:

Your final choice will depend on the purpose of the software solution:

• If you need software exclusively for managing your inner company processes, then go with a web app. It needs no bright design, and it is functional and powerful.
• If you want to create a SaaS and sell it to others, then web apps are the best.
• If you need to attract customers and communicate with them online, then a website may be enough. It can be integrated with your CRM or ERP allowing you to have a 360-degree overview of your business. It can also increase automation.
• If most traffic comes to you from mobile users, you should think of creating PWA, a responsive website, or mobile app — native or hybrid. The development of a website or PWA will be less expensive and quicker than building a mobile app.

At any rate, you can start by building a simple website or an app to test your idea and find out what types of devices and operating systems bring the most traffic. Then you can rebuild your MVP into a full-fledged solution — a responsive website, PWA, web app, or a native mobile app.